<template>
    <div>
        <el-table
            v-loading="loading"
            :data="courseList"
            ref="multipleTable"
            @selection-change="handleSelectionChange1"
        >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="课程类别" align="center" prop="typeId" />
            <el-table-column label="课程编号" align="center" prop="varCode" />
            <el-table-column label="课程名称" align="center" prop="varName" />
            <el-table-column label="课程描述" align="center" prop="varDesc" />
            <el-table-column label="课程封面" align="center">
                <template slot-scope="scope">
                    <img
                        v-if="scope.row.varCoverInfo"
                        class="varCoverInfo"
                        :src="scope.row.varCoverInfo"
                        alt=""
                        srcset=""
                    />
                </template>
            </el-table-column>
            <el-table-column label="学时" align="center" prop="intClassHour" />
            <el-table-column
                label="题目数量"
                align="center"
                prop="questionCount"
            />
            <el-table-column
                label="适用行业"
                align="center"
                prop="varIndustry"
            />
        </el-table>
        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="allQueryParams.pageNum"
            :limit.sync="allQueryParams.pageSize"
            @pagination="getList"
        />
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <!-- <el-button @click="cancel">取 消</el-button> -->
        </div>
    </div>
</template>
<script>
import { listCourse } from "@/api/system/course";
export default {
    name: 'selectCourse',
    data () {
        return {
            loading: false,
            selectedIds: [],
            courseList: [],
            total: 0,
            allQueryParams: {
                pageNum: 1,
                pageSize: 10
            }
        }
    },
    created () {
        this.getList()
    },
    methods: {
        submitForm () {
            this.$emit('selectFn', this.selectedIds.flat(), this.clearSelected);
        },
        clearSelected () {
            this.selectedIds = []
            this.$refs.multipleTable.clearSelection();
        },
        handleSelectionChange1 (selection) {
            this.selectedIds[this.allQueryParams.pageNum] = selection
        },
        getList () {
            this.loading = true
            listCourse(this.allQueryParams).then(response => {
                this.courseList = response.data.rows;
                this.total = response.data.total;
                let selectRowIds = this.selectedIds[this.allQueryParams.pageNum]
                this.loading = false
                this.$nextTick(() => {
                    if (selectRowIds) {
                        let selectRowIdsStr = JSON.stringify(selectRowIds)
                        this.courseList.forEach(item => {
                            if (selectRowIdsStr.indexOf(JSON.stringify(item)) != -1) {
                                this.$refs.multipleTable.toggleRowSelection(item);
                            }
                        })
                    }
                })
            });
        }
    }
}
</script>
<style scoped>
.dialog-footer {
    padding: 20px;
    padding-top: 10px;
    text-align: right;
}
.varCoverInfo {
    max-width: 100px;
    max-height: 100px;
}
</style>
